<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <style>
        .layui-upload-img{
            border: 1px solid #1E9FFF;
            width: 200px;
            height: 200px;
            border-radius: 25px;

        }
    </style>
</head>
<body>

<div class="layui-panel" style="padding: 8px;">
    <form name="form1" class="layui-form layui-form-pane">
        <div class="layui-form-item" style="text-align: left">
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-normal"  id="checkPhoto"  style="width: 200px">添加照片</a>
                <div class="layui-upload-list">
                    <img  class="layui-upload-img"  id="photo">
                    <p id="photoText"></p>
                </div>
                <div>
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                         lay-filter="photoProgress"  style="width: 200px">
                        <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品编号</label>
            <div class="layui-input-block">
                <input class="layui-input"  name="munber" lay-verify="required" autocomplete="off" placeholder="输入商品的编号">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input class="layui-input"  name="name" lay-verify="required" autocomplete="off" placeholder="输入商品名称">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">市场售价</label>
            <div class="layui-col-md4">
                <input class="layui-input " name="marketPrice" lay-verify="required" autocomplete="off" placeholder="0.00">
            </div>
            <div>
                <input class="layui-input" readonly="readonly" value="元"  style="width: 40px; background-color:#eeeeee" />
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否新品</label>
            <div class="layui-input-block">
                <input type="checkbox" name="newCommodity" lay-skin="switch" lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否热卖</label>
            <div class="layui-input-block">
                <input type="checkbox" name="hot" lay-skin="switch" lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否在售</label>
            <div class="layui-input-block">
                <input type="checkbox" name="state" lay-skin="switch" lay-text="是|否"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品单位</label>
            <div class="layui-input-block">
                <input class="layui-input" name="company" lay-verify="required" autocomplete="off" placeholder="件/个/盒">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-block">
                <button  type="button" class="layui-btn  layui-btn-md"  id="submitAdd" lay-submit="" lay-filter="submitAdd" >
                    <span>+ 增加</span>
                </button>
                <input id="inadd" class="layui-input"  style="width: 80px"  name="keyword" autocomplete="off" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-block">
                <select name="fenLei" id="fenLei"  lay-filter="fenLei"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属品牌商</label>
            <div class="layui-input-block">
                <select name="pinPai" id="pinPai" lay-filter="pinPai"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品简介</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required" name="introduction" autocomplete="off" >
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">详细介绍</label>
            <div class="layui-input-block">
                <textarea id="mytext" placeholder="请输入内容"  name="details" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit="" lay-filter="submitBtn1" id="submitBtn1"></a>
            </div>
        </div>
    </form>
</div>
<div class="layui-panel" style="padding: 20px;">
    <form name="form2" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">商品简介</label>
        </div>
        <div class="layui-col-md5">
            <a id="a" class="layui-btn layui-btn-normal" lay-submit=""  lay-filter="a"> 默认标准规格</a>

            <a id="b" class="layui-btn layui-btn-normal " lay-submit=""  lay-filter="b">多规格支持</a>
        </div>
        <div>
            <a id="c" class="layui-btn layui-btn-normal" lay-submit=""  lay-filter="c" >添加</a>
        </div>
        <a id="tableA">
        <table id="table1" class="layui-table " lay-skin="nob">
            <tr>
                <td class="layui-icon"> 规格名</td>
                <td> 规格值</td>
                <td> 规格图片</td>
            </tr>

            <tr>
                <td>规格</td>
                <td>标准</td>
                <td> </td>
            </tr>

        </table>
        </a>
        <a id="tableB"><table id="table2" lay-filter="table2" lay-skin="nob"></table></a>
        <div class="layui-form-item" style="display: none">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit="" lay-filter="submitBtn2" id="submitBtn2"></a>
            </div>
        </div>
    </form>

</div>
<div class="layui-panel" style="padding: 20px;">

    <form name="form3" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">商品库存</label>
        </div>
        <a id="tableC"><table id="table3" lay-filter="table3" lay-skin="nob"></table></a>
        <a id="tableD"><table id="table4" class="layui-table" lay-skin="nob"></table></a>
    </form>
</div>
<div class="layui-panel" style="padding: 40px;">

    <form name="form4" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">商品参数</label>
        </div>
        <div>
            <a class="layui-btn layui-btn-normal" lay-submit="" lay-filter="addd" >添加</a>
        </div>
        <table id="table5" class="layui-table " lay-filter="table5" lay-skin="nob"></table>
    </form>
    <div style="float: right">
        <a href="" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="off" >取消</a>

        <a class="layui-btn layui-btn-normal " lay-submit="" lay-filter="oon">上架</a>
    </div>
</div>

</body>
<script id="tool" type="text/html">
    {{# if(d.state==null&&d.parameterName==null){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{# }}}
    {{# if(d.parameterName!=null&&d.state==null){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete1">删除</a>
    {{# }}}
    {{# if(d.state!=null){ }}
    <a class="layui-btn  layui-btn-xs"  lay-event="sz">设置</a>
    {{# }}}
</script>
<script id="photo1" type="text/html">
    {{# if(d.beImg!=null){ }}
    <img src="/file/fc/showImg/{{d.beImg}}" style="width: 30px;height: 60px;">
    {{# }}}
</script>
<script id="photo2" type="text/html">
    {{# if(d.img!=null){ }}
    <img src="/file/fc/showImg/{{d.img}}" style="width: 30px;height: 60px;">
    {{# }}}
</script>
<script>
    var $,form;
    layui.use(['form','jquery','upload','layedit','element','layer','table'],function () {
        var upload = layui.upload,
            layer = layui.layer,
            elem = layui.element,
            table=layui.table,

            layedit=layui.layedit;
        $ = layui.jquery,

        form = layui.form;
        $('#inadd').hide()
        abc();

        //加载商品类目
        getFebLei();
        //加载品牌
        getPinPai();

        layedit.build('mytext',{
            height:500
        })
        //头像上传
        var photoUpload = upload.render({
            elem:'#checkPhoto',
            url:'/file/fc/fileUpload',
            before: function (obj) {
                obj.preview(function (i,f,r) {
                    $('#photo').attr('src',r);
                });
                elem.progress('photoProgress','0%');
            },
            done:function (res) {
                if(!res.is){
                    layer.alert('上传失败，请稍后再试......')
                }else{
                    $('#img').val(res.file.id);
                }
            },
            error:function(){

            },
            progress:function (n,el,e) {
                elem.progress('photoProgress',n+'%');
                if(n==100){
                    layer.msg('上传完成!',{icon:1});
                }
            }
        })
        //加载table2表格
        table.render({
            elem:'#table2',
            page:false,
            url:'/system/bcc/find',
            cols:[
                [
                    {field:'beName',title:'规格名'},
                    {field:'beValue',title:'规格名'},
                    {field:'beImg',title:'规格图片',templet: '#photo1', align: 'center'},
                    {fixed:'right',title: '操作', align:'center',toolbar:'#tool'}
                ]
            ]
        })
        //加载table3表格
        table.render({
            elem:'#table3',
            page:false,
            url:'/system/scc/find',
            cols:[
                [
                    {field:'cation',title:'货品规格'},
                    {field:'price',title:'货品售价'},
                    {field:'number',title:'货品数量'},
                    {field:'img',title:'货品图片',templet: '#photo2', align: 'center'},
                    {fixed:'right',title: '操作', align:'center',toolbar:'#tool'}
                ]
            ]
        })
        //加载table4表格
        table.render({
            elem:'#table4',
            page:false,
            url:'/system/scc/find',
            where:{
              state:0
            },
            cols:[
                [
                    {field:'cation',title:'货品规格'},
                    {field:'price',title:'货品售价'},
                    {field:'number',title:'货品数量'},
                    {field:'img',title:'货品图片',templet: '#photo2', align: 'center'},
                    {fixed:'right',title: '操作', align:'center',toolbar:'#tool'}
                ]
            ]
        })
        //加载table5表格
        table.render({
             elem:'#table5',
            page:false,
            url:'/system/pc/find',
            cols:[
                [
                    {field:'parameterName',title:'商品参数名称'},
                    {field:'parameterValue',title:'商品参数值'},
                    {fixed:'right',title:'操作', align:'center',toolbar:'#tool'},
                ]
            ]

        })
        //监听tool
        table.on('tool(table2)', function (obj) {
            if(obj.event=='delete'){
                active.delete('/system/bcc/delete',obj.data.id)
            }
        })
        table.on('tool(table3)', function (obj) {
            if(obj.event=='sz'){
                active.setUp("/page/system/setUp/"+obj.data.id)
            }
        })
        table.on('tool(table5)', function (obj) {
            if(obj.event=='delete1'){
                active.delete('/system/pc/delete',obj.data.id)
            }
        })
        //监听关键字的增加按钮
        form.on('submit(submitAdd)',function () {
         $('#submitAdd').hide()
            $('#inadd').show()
        })
        //监听所属分类的下拉按钮
        form.on('select(fenLei)',function (data) {
            var value=data.value
            alert(value)
        })
        form.on('submit(a)',function () {
           abc();
        })
        form.on('submit(b)',function () {
            $('#b').removeClass("layui-btn layui-btn-primary")
            $('#b').addClass("layui-btn layui-btn-normal")
            $('#a').removeClass("layui-btn layui-btn-normal")
            $('#a').addClass("layui-btn layui-btn-primary")
            $('#c').show()
            $('#tableA').hide()
            $('#tableC').hide()
            $('#tableB').show()
            $('#tableD').show()
        })
        //监听添加按钮
        form.on('submit(c)',function () {
           active.add('/page/system/shelfAdd');
        })
        //监听底部添加按钮
        form.on('submit(addd)',function () {
           active.addd("/page/system/parameterAdd")
        })
        //监听form1的提交按钮
        form.on('submit(submitBtn1)',function (data) {
            var dataForm=data.field
            console.log(dataForm)
            $.ajax({
                type:'post',
                url:'/system/ct/up',
                data:dataForm,
                dataType:'json',
                success:function (result) {
                    layer.msg(result.msg)
                    if(result.is){
                         layui.table.reload('table2');
                         layui.table.reload('table3');
                         layui.table.reload('table4');
                         layui.table.reload('table5');
                    }
                }
            })
        })
        //监听上架
        form.on('submit(oon)',function () {
            btnSubmit1()
        })
        //监听取消
        form.on('submit(off)',function () {
           /*parent.window.ele.tabDelete('head_tabs','1473')*/
            $.ajax({
                type:'post',
                url:'/system/scc/commodity1',
                success:function (re) {
                    alert()
                }
            })
           parent.window.open2()
        })
        var active={
            add:function (content) {
                var b=false;
                top.layer.open({
                    type:2,
                    content:content,
                    area:['700px','650px'],
                    btn:['确定','取消'],
                    btn1:function (i,o) {
                        b=true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function () {
                        if(b) layui.table.reload('table2')
                    }
                })

            },
            delete:function (content,id) {
                $.ajax({
                    type:'post',
                    url:content,
                    data:{
                        id:id
                    },
                    dataType:'json',
                    success:function (result) {
                        layer.msg(result.msg)
                        if(result.is){
                            table.reload('table2')
                            table.reload('table5')
                        }

                    }

                })
            },
            setUp:function (content) {
                var b=false;
                top.layer.open({
                    type:2,
                    content:content,
                    area:['700px','650px'],
                    btn:['确定','取消'],
                    btn1:function (i,o) {
                        b=true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function () {
                        if(b) layui.table.reload('table3')
                    }
                })

            },
            addd:function (content) {
                var b=false;
                top.layer.open({
                    type:2,
                    content:content,
                    area:['700px','650px'],
                    btn:['确定','取消'],
                    btn1:function (i,o) {
                        b=true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                    },
                    end:function () {
                        if(b) layui.table.reload('table5')
                    }
                })

            }
        }


    })





    //加载选择框
    function getFebLei(data) {
        $.ajax({
            type:'post',
            url:'/ic/getFind',
            data:data,
            dataType:'json',
            success:function (result) {
                var o=$('#fenLei').empty()
                $.each(result.data,function (i,data) {
                    o.append('<option value="'+data.id+'" >'+data.name+'</option>')
                })
                form.render('select');
            }
        })
    }
    //加载选择框
    function getPinPai(data) {
        $.ajax({
            type:'post',
            url:'/system/bc/getFind',
            data:data,
            dataType:'json',
            success:function (result) {
                var o=$('#pinPai').empty()
                $.each(result.data,function (i,data) {
                    o.append('<option value="'+data.id+'" >'+data.brandName+'</option>')
                })
                form.render('select');
            }
        })
    }
     function abc() {
         $('#a').removeClass()
         $('#a').addClass("layui-btn layui-btn-normal")
         $('#b').removeClass("layui-btn layui-btn-normal")
         $('#b').addClass("layui-btn layui-btn-primary")
         $('#c').hide()
         $('#tableB').hide();
         $('#tableD').hide();
         $('#tableA').show();
         $('#tableC').show();

     }
    function hideAddShow(data) {
        if(data.keyword==null||data.keyword==""){
            $('#inadd').hide()
            $('#submitAdd').show()
        }
    }
    function btnSubmit1() {
        $('#submitBtn1').click();
    }

</script>

</body>
</html>